<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>图片聚焦-imagezoom-原生js封装</title>
	<link rel="shortcut icon" href="../public/image/favicon.ico" type="images/x-icon"/>
	<link rel="icon" href="../public/image/favicon.png" type="images/png"/>
	<link rel="stylesheet" type="text/css" href="../public/style/cssreset-min.css">
	<link rel="stylesheet" type="text/css" href="../public/style/common.css">
	<style type="text/css">
		.panel{
			margin-bottom: 20px;
		}
		.zoom{
			overflow: hidden;
		}
		.zoom li{
			float: left;
			width:300px;
			height: 300px;
			border:1px solid #ebebeb;
			margin-left: 20px;
			overflow: hidden;
		}
	</style>
	<script type="text/javascript" src="../code/imagezoom.js"></script>
</head>
<body>
	<div class="header">
        <a href="https://github.com/huanghanzhilian/widget" target="_blank">项目地址</a>
        <a href="/">返回首页</a>
    </div>
    <div class="main">

		<div class="panel">
				<div class="zoom" id="zoom">
					<ul>
						<li>
							<img src="image/pic1.jpg">
						</li>
						<li>
							<img src="image/pic2.jpg">
						</li>
					</ul>
				</div>
			</div>
			<div class="code">
				<p>
<pre>
new imagezoom('#zoom li',{
	'hoverEvent':true
})
</pre>
				</p>
			</div>
			<script type="text/javascript">
				new imagezoom('#zoom li',{
					'hoverEvent':true
				})
			</script>


		<div class="example">

			<div class="call">
				<h1>调用方法：</h1>
				<p>new imagezoom(options);</p>
			</div>


			<h2>options参数</h2>
			<table>
				<thead>
					<tr>
						<th width="150">参数</th>
						<th width="80">默认值</th>
						<th>说明</th>
					</tr>
				</thead>
				<tbody>
					<tr>
						<td>width</td>
						<td>[计算]</td>
						<td>图片外层宽度</td>
					</tr>
					<tr>
						<td>height</td>
						<td>[计算]</td>
						<td>图片外层高度</td>
					</tr>
					<tr>
						<td>borderWidth</td>
						<td>0</td>
						<td>图片边框大小</td>
					</tr>
					<tr>
						<td>data</td>
						<td>'original'</td>
						<td>惰性加载时的图片地址源</td>
					</tr>
					<tr>
						<td>resizeable</td>
						<td>true</td>
						<td>窗口大小改变时是否重新调整图片位置</td>
					</tr>
					<tr>
						<td>effect</td>
						<td>'out'</td>
						<td>图片居中方式处理</td>
					</tr>
					<tr>
						<td>condition</td>
						<td>'img'</td>
						<td>默认筛选条件</td>
					</tr>
					<tr>
						<td>hoverEvent</td>
						<td>false</td>
						<td>鼠标悬浮时是否放大</td>
					</tr>
					<tr>
						<td>hoverRatio</td>
						<td>1.2</td>
						<td>鼠标悬浮时放大比例</td>
					</tr>
					<tr>
						<td>duration</td>
						<td>30</td>
						<td>鼠标悬浮时放大动画时长</td>
					</tr>
				</tbody>
			</table>
		</div>




    </div>
</body>
</html>